查看原文
其他

案例锦囊|交互设计中「防呆手法」的巧妙应用!

元尧 长弓小子 2022-10-01
     关注「长弓小子」看更多设计干货!


Hi,我是元尧。欢迎长按下图二维码加我微信,带你进设计师交流群,与上万小伙伴一起交流成长!

「👇 添加好友请备注:设计交流」


   全文共 1727 字,阅读需要 6 分钟




「防呆设计」手法作为一种预防、矫正错误行为的手段,经常被用于交互设计中,让用户不需要花费注意力就可以正确无误地完成操作。本文重点分享四种常见的「防呆设计」手法设计案例:


- 断根

- 保险

- 标示

- 警告


希望会为你带来更多的设计灵感💡。



RULE 1

断根


「断根」是指将发生错误的原因从根本上排除,不给用户犯错的机会。在交互设计中,最常见的设计方法就是使用置灰 / 禁用效果。

  案例 1    美团外卖对于在休息 / 暂不接单的店铺,除了使用「休息中」的 Tag 进行标注,还使用置灰的效果,让用户对于店铺营业情况一目了然,不会误点进入:



  案例 2     支付宝理财产品阅读协议,在用户勾选前一直会显示「请勾选」,页面的确定按钮在协议签署前为不可点击状态



  案例 3     用户用 Gmail 写邮件时,可以设置邮件为「保密邮件」,收件人将无法进行转发、复制、下载或打印邮件;也可以设定保密邮件的可读时间,到期后邮件内容会自动消失,来确保信息的保密性:




RULE 2

保险


「保险」是指按照顺序运行两个以上的动作才能完成操作,多加一步操作步骤,给用户创造更多的思考机会和时间。在交互设计中的典型用法是增加弹窗、链接等形式提供更多信息,让用户进一步确认。


  案例 1     微信转账,连续转给好友同样金额的两笔钱,且第一笔好友未接收,系统会发出提醒,让用户再次确认,避免重复打款:



  案例 2     被从微信群踢出的用户,如果再次申请加入该群,该群的管理员可以在申请中查看 ta 曾经在群中的聊天记录,判断 ta 是否适合入群:



  案例 3     在一些重要的决策或不可逆的操作行为中,二次弹窗确认尤为常见。比如当用户在填写信息时点击「作废」,系统会给出提示让用户再次考虑




RULE 3

标示


「标示」是指运用线条粗细、形状、颜色等区别以方便识别,提高易识别度。交互设计中多以颜色鲜亮的小色块、圆点等进行示意。


  案例 1     钉钉的图片保存到本地的功能,做了很好的提示,下载过的图片会带有绿色的「对勾」,避免用户多次重复保存图片:



  案例 2     微信发朋友圈的分组功能,你可以选择「谁可以看」和「谁不可看」,可以看用的是绿色字,不可以看用的是红色字,很易于区分,不用担心会搞混或错用:



  案例 3     钉钉的会议未按时参会的提醒,用红色标签对时间进行重点标示:



  案例 4     使用 Sketch 导出同名同格式的文件时,系统会在弹窗中将「取消」作为主按钮的形式呈现,避免用户因为忘记重命名而覆盖之前的导出的同名文件:



  案例 5     钉钉和阿里的出差系统打通,当员工提交了出差申请,到了出差的那一天,钉钉上状态会自动切换成 「✈️出差中」,方便其他同事了解你的状态:




  案例 6     Google 的标签页,可以被分组,标记颜色和重命名,可以一定程度上缓解因标签页开得太多而找不到的情况:




  案例 7     疫情期间,很多小区的大门仅供行人通行,只有个别大门是行人和车辆都可通行。高德地图 App 会给每个小区的门标注好通行权限,方便开车的用户选择合适的门进入小区,不过个人感觉这个信息可以标注得更明显一些:




RULE 4

警告


「警告」是指将不正常或即将要出问题的情况,通过颜色、灯光、声音、动效等明显、特殊的方式进行警告,提醒用户及时修正错误。交互设计可以借鉴工业设计中的报警器等产品的功能,用弹窗、灯光和声音等对用户进行提示。

  案例 1     在铁路 12306 上购票时,如果选的列车时间距离现在 1 小时内,会弹出弹窗提示发车时间与现在较近,提醒用户注意行程时间:



  案例 2     京东 App 会在用户使用移动网络播放的环境下,提示用户注意流量损耗



  案例 3     上海的买菜 App 在疫情期间菜不好抢,盒马会在你加购每一件商品的过程中,都提示运力不足,让用户再做考虑



还没看够?😊 公众号后台回复「好设计」看更多设计案例!



   知识福利 🥳  

我在每日输出的知识内容中,选择了一部分进行汇总,梳理了从【接到设计需求到产出设计沉淀】的完整流程。想要看到可以在公众号后台留言 “设计思维”  👇👇👇


与【工作经验和工作方法】相关的精华内容,在公众号后台留言 “工作经验”  👇👇👇



如果你还有其他设计、工作、作品集、面试相关的问题,欢迎向我提问。如果你想加入设计师交流群,也可以识别二维码👇👇👇添加我的微信。添加好友请备注:设计交流。


学海无涯,盼你同舟👇👇👇



 


   详解丨一文带你用好 Radio 和 Tabs!

   经验|设计还原度低?试试这些方法!

   经验|详解 B 端组件的更新优化流程!



- END -

欢迎长按图片👇👇👇加我微信
带你加入设计师社群

了解更多设计理念和设计方法

期待与你的交集!
「添加好友请备注:设计交流」

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存